<template>
	<view>
		<view class="service-item-box">
			<view class="item-box">
				<text class="title-text">系统管理员电话：</text>
				<text class="content-text">{{systemCustomerPhone}}</text>
				<view class="icon-box" @click="setClipboard">
					<wjf-iconfont code="e661" color="deepskyblue" class="margin-left-50">
						<text class="icon-text">复制号码</text>
					</wjf-iconfont>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemCustomerPhone: '17799192866'
			}
		},
		methods: {
			setClipboard() {
				uni.setClipboardData({
					data: this.systemCustomerPhone,
					showToast: false,
					success: (res) => {
						uni.showToast({
							title: '号码已复制到剪贴板',
							icon: 'none'
						});
					},
					fail: (err) => {
					},
					complete: () => {
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.service-item-box {
		margin: 30rpx 20rpx;
		padding: 50rpx 20rpx;
		border-radius: 16rpx;
		// orangered
		background-color: rgba(255, 69, 0, 0.2);
		// background-color: skyblue;
		// color: deepskyblue;

		.item-box {
			display: flex;
			align-items: center;

			.title-text {
				color: dodgerblue;
				font-size: 28rpx;
				font-weight: 550;
			}

			.content-text {
				font-size: 30rpx;
				color: #555;
			}

			.icon-box {
				display: flex;
				align-items: center;
				.icon-text {
					margin-left: 10rpx;
					font-size: 24rpx;
					color: #888;
				}
			}

			
		}
	}
</style>